<template>
  <div class="home" ref="student">
    <!-- 头部导航 -->
    <el-header
      class="head"
      style="height: 75px; position: fixed; top: 0; left: 0; z-index: 999"
      v-show="$route.meta.istrun"
    >
      <div class="nav">
        <div class="left" style="font-size: 18px">
          <div class="block" style="display: flex">
            <el-image
              :src="src"
              style="
                width: 180px;
                height: 65px;
                margin-right: 25px;
                padding-top: 5px;
              "
            ></el-image>
          </div>
        </div>
        <el-menu
          router
          :default-active="currentMenu"
          class="el-menu-demo"
          mode="horizontal"
          background-color="rgb(0, 21, 41)"
          text-color="rgb(166, 173, 180)"
          active-text-color="#fff"
        >
          <el-menu-item
            index="/testlist"
            :route="{ path: '/student/testlist' }"
            style="height: 75px; line-height: 75px; font-size: 18px"
            ><i class="el-icon-document"></i>考试列表</el-menu-item
          >
          <el-menu-item
            index="/mytest"
            :route="{ path: '/student/mytest' }"
            style="height: 75px; line-height: 75px; font-size: 18px"
            ><i class="el-icon-s-custom"></i>我的考试</el-menu-item
          >
        </el-menu>
        <el-col
          :span="12"
          style="display: flex; width: 500px; padding-left: 350px"
        >
          <div class="block" style="padding: 12px">
            <el-avatar :size="50" :src="circleUrl"></el-avatar>
          </div>
          <div class="sub-title">{{ user }}</div>
        </el-col>
      </div>
    </el-header>
    <!-- 主题内容 -->
    <el-main>
      <router-view></router-view>
    </el-main>
  </div>
</template>

<script>
export default {
  name: "Student",

  data() {
    return {
      currentMenu: "/testlist",
      circleUrl: require("../assets/user.jpg"),
      src: require("../assets/logolc.png"),
      user: "用户名",
    };
  },
  created() {
    // 刷新当前页面，保持当前页面导航高亮
    this.getUrl();
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    // 刷新当前页面，保持当前页面导航高亮
    getUrl() {
      let _this = this;
      _this.currentMenu = `/${this.$route.path.split("/")[2]}`;
    },
  },
  watch: {
    // 刷新当前页面，保持当前页面导航高亮
    $route(to, from) {
      // console.log(to.path);
      this.getUrl();
    },
  },
};
</script>

<style scoped lang="less">
* {
  margin: 0;
  padding: 0;
}

.nav {
  width: 80%;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  .left {
    width: 400px;
    padding-left: 50px;
  }
}
.el-header {
  width: 100%;
  box-sizing: border-box;
  background-color: rgb(0, 21, 41);
  color: rgb(166, 173, 180);
  text-align: center;
  line-height: 75px;
}
.el-menu {
  height: 75px;
  line-height: 75px;
  .is-active {
    background-color: rgb(24, 144, 255) !important;
  }
}

.el-main {
  width: 100vw;
  height: 100vh;
  // padding-top: 110px;
  padding: 0;
  box-sizing: border-box;
  color: #333;
  background-color: #f0f2f5;
  width: 100vw;
  height: 100vh;
}
</style>
